---
import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer";
import Navbar from "../../components/Navbar/";
import ProductShowcase from "./product-showcase";
import { DESKTOP_PRODUCTS_OPTIONS, MOBILE_PRODUCTS } from "./config";
// Get the current language from URL params or cookies
interface Props {
  lang: string;
}

const { lang = "en" } = Astro.props;

const currentLang = lang === "ar" ? "ar" : "en";
const isRtl = currentLang === "ar";
// Define configurable menu items with translations
// const menuItems = [];
const menuItems = [
  {
    en: "Home",
    ar: "الرئيسية", // 正确翻译：首页
    url: "/",
    activeName: "home",
  },
  {
    en: "Product",
    ar: "المنتج", // 正确翻译：产品
    url: "/products/",
    activeName: "product",
  },
  {
    en: "App & Services",
    ar: "التطبيقات والخدمات", // 正确翻译：应用与服务
    url: "/appAndServices/",
    activeName: "appAndServices",
  },
  {
    en: "About us",
    ar: "عنّنا", // 正确翻译：关于我们
    url: "/aboutUs/",
    active: false,
    activeName: "aboutUs",
  },
];
---

<Layout title="icam365" lang={currentLang}>
  <!-- <Header /> -->
  <main class={isRtl ? "rtl" : "ltr"}>
    <Navbar logo="tapo" menuItems={menuItems} currentLanguage={currentLang} client:only />
    <div class="hidden lg:block">
      {
        DESKTOP_PRODUCTS_OPTIONS.topArea.map((item) => (
          <ProductShowcase
            productKey={item.productKey}
            imagePath={item.imagePath}
            imageAlt={item.imageAlt}
            lang={currentLang}
            style={item.style}
            customProductLayoutClass="left-[20%] top-[32%]"
            client:only
          />
        ))
      }
      <div class="flex">
        <ProductShowcase
          productKey={DESKTOP_PRODUCTS_OPTIONS.middleArea[0].productKey}
          imagePath={DESKTOP_PRODUCTS_OPTIONS.middleArea[0].imagePath}
          imageAlt={DESKTOP_PRODUCTS_OPTIONS.middleArea[0].imageAlt}
          lang={currentLang}
          customProductLayoutClass="left-[32%] top-[12%]"
          client:only
        />
        <div class="w-2"></div>
        <ProductShowcase
          productKey={DESKTOP_PRODUCTS_OPTIONS.middleArea[1].productKey}
          imagePath={DESKTOP_PRODUCTS_OPTIONS.middleArea[1].imagePath}
          imageAlt={DESKTOP_PRODUCTS_OPTIONS.middleArea[1].imageAlt}
          lang={currentLang}
          customProductLayoutClass="left-[42%] top-[50%] -translate-x-1/2 -translate-y-1/2"
          client:only
        />
      </div>
      <ProductShowcase
        productKey={DESKTOP_PRODUCTS_OPTIONS.bottomArea[0].productKey}
        imagePath={DESKTOP_PRODUCTS_OPTIONS.bottomArea[0].imagePath}
        imageAlt={DESKTOP_PRODUCTS_OPTIONS.bottomArea[0].imageAlt}
        lang={currentLang}
        customProductLayoutClass="left-[10%] top-[20%]"
        client:only
      />
      <ProductShowcase
        productKey={DESKTOP_PRODUCTS_OPTIONS.bottomArea[1].productKey}
        imagePath={DESKTOP_PRODUCTS_OPTIONS.bottomArea[1].imagePath}
        imageAlt={DESKTOP_PRODUCTS_OPTIONS.bottomArea[1].imageAlt}
        lang={currentLang}
        customProductLayoutClass="left-[24%] top-[36%]"
        client:only
      />
    </div>

    <div class="lg:hidden max-w-full">
      <ProductShowcase
        productKey={MOBILE_PRODUCTS[0].productKey}
        imagePath={MOBILE_PRODUCTS[0].imagePath}
        imageAlt={MOBILE_PRODUCTS[0].imageAlt}
        lang={currentLang}
        customProductLayoutClass="!left-[5%] top-[82%] !text-left text-black break-words"
        client:only
      />
      <ProductShowcase
        productKey={MOBILE_PRODUCTS[1].productKey}
        imagePath={MOBILE_PRODUCTS[1].imagePath}
        imageAlt={MOBILE_PRODUCTS[1].imageAlt}
        lang={currentLang}
        customProductLayoutClass="left-[50%] !top-[20%] text-center -translate-x-1/2"
        client:only
      />
      <ProductShowcase
        productKey={MOBILE_PRODUCTS[2].productKey}
        imagePath={MOBILE_PRODUCTS[2].imagePath}
        imageAlt={MOBILE_PRODUCTS[2].imageAlt}
        lang={currentLang}
        customProductLayoutClass="!left-[5%] !top-[50%] !text-left"
        client:only
      />
      <ProductShowcase
        productKey={MOBILE_PRODUCTS[3].productKey}
        imagePath={MOBILE_PRODUCTS[3].imagePath}
        imageAlt={MOBILE_PRODUCTS[3].imageAlt}
        lang={currentLang}
        customProductLayoutClass="!left-[50%] !top-[76%] -translate-x-1/2"
        client:only
      />
      {
        MOBILE_PRODUCTS.slice(4).map((item) => (
          <ProductShowcase
            productKey={item.productKey}
            imagePath={item.imagePath}
            imageAlt={item.imageAlt}
            lang={currentLang}
            customProductLayoutClass="left-[50%] !top-[20%] text-center -translate-x-1/2"
            client:only
          />
        ))
      }
    </div>
    <Footer lang={lang} client:only />
  </main>
</Layout>

<style>
  .hero {
    background: linear-gradient(90.92deg, #6847a6 0%, #d05ab0 100%);
  }

  .welcome-to-use {
    background: linear-gradient(90.92deg, #6044aa 0%, #e04fb3 100%);
  }

  @media (min-width: 640px) {
    .camera-bg-img {
      background-image: url(./assets/camera-background.webp);
    }
  }
</style>
